<!-- shipCertificateSee -->

<template>
  <div class="loadHomeWork">
    <div class="loadHomeWorkIneer">
      <div class="loadTop">通航区域图</div>
      <div class="table" :style="{ width: tableWidth }">
        <div class="leftImageContain">
          <img src="@/assets/img/map.png" alt="" />
          <div
            class="text"
            :class="`text${index + 1}`"
            v-for="(item, index) in isLandList"
            @click="goPage(`${item.name}`, item.value)"
          >
            {{ item.name }}
          </div>

          <!-- <div class="text text1" @click="goPage('洋山港', 1)">洋山港</div>
          <div class="text text2" @click="goPage('南港', 2)">南港</div>
          <div class="text text3" @click="goPage('绿华山', 3)">绿华山</div>
          <div class="text text4" @click="goPage('金山锚地', 4)">金山锚地</div>
          <div class="text text5" @click="goPage('外高桥', 5)">外高桥</div>
          <div class="text text6" @click="goPage('长兴岛', 6)">长兴岛</div>
          <div class="text text7" @click="goPage('崇明岛', 7)">崇明岛</div> -->
        </div>
        <!-- <div class="rightListContain">
          <div class="rightList">
            <div
              class="textMapList"
              v-for="(item, index) in isLandList"
              @click="goPage(item.name, item.value)"
            >
              {{ index + 1 + "." + item.name }}
            </div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import EventBus from "@/mitt/eventBus.js";
import rename from "@/mitt/getPath.js";
import service from "@/api/api";
// import userName from "@/assets/img/userName.png";
export default {
  name: "",
  data() {
    return {
      token: "",
      isLandList: [],
      tableWidth: null,
    };
  },

  methods: {
    async isLand() {
      await service({
        method: "get",
        url: "dict-item/find-all",
        params: { dicTypeTypeId: 11 },
      })
        .then((e) => {
          this.isLandList = e.data;
        })
        .catch((err) => {
          this.$message({
            message: "获取岛屿数据失败",
            type: "warning",
          });
        });
    },
    goPage(name, num) {
      this.$router.push({
        path: "/app.haiGangZhiYuanSee",
        query: {
          name: name,
          type: num,
        },
      });
    },

    sendMessage() {
      let res = rename();
      EventBus.emit("custom-event", res);
    },

    handSize() {
      if (window.innerWidth > 630) {
        if (this.$store.state.width == 200) {
          this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
        } else if (this.$store.state.width == 90) {
          this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
        }
      } else {
        this.tableWidth = window.innerWidth - 30 + "px";
      }
    },
  },
  watch: {
    "$store.state.width"(newVal, oldVal) {
      //对数据执行操作
      if (window.innerWidth > 630) {
        if (newVal == 90) {
          this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
        } else if (newVal == 200) {
          this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
        }
      }
    },
  },

  created() {
    this.sendMessage();
    this.isLand();
  },
  beforeMount() {
    if (window.innerWidth > 630) {
      if (this.$store.state.width == 200) {
        this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
      } else if (this.$store.state.width == 90) {
        this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
      }
    } else {
      this.tableWidth = window.innerWidth - 30 + "px";
    }
  },
  mounted() {
    // this.sendMessage();
    window.addEventListener("resize", this.handSize);
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.handSize);
  },
};
</script>
<style lang="less" scoped>
.loadHomeWork {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  .loadHomeWorkIneer {
    width: 98.5%;
    height: 91vh;
    margin: auto;
    margin-top: 1vh;
    background: white;
    overflow-y: auto;
    overflow-x: auto;

    .loadSecond {
      width: 280px;

      color: black;
      text-align: center;
      line-height: 33px;
      color: black;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-left: 10px;
      font-size: 15px;
      .topName {
        width: 90px;
        line-height: 33px;
        background: #67c23a;
        border-radius: 5px;
        a {
          display: block;
          width: 90px;
          line-height: 33px;
          text-decoration: none;
          color: white;
        }
      }
      .topName:nth-child(3) {
        background: #242121;
      }
    }
  }
  // background: blue;
}
.table {
  width: 100%;
  margin: auto;
  display: flex;
  height: 86vh;
  .leftImageContain {
    width: 100%;
    height: 83vh;
    position: relative;
    img {
      width: 100%;
      height: 86vh;
      object-fit: fill;
    }
    .text {
      cursor: pointer;
      font-size: 20px;
      font-weight: 600;
      color: black;
      border: 2px solid rgb(166, 154, 154);
      border-radius: 5px;
      padding: 0 5px;
    }
    .text1 {
      position: absolute;
      top: 65%;
      left: 56%;
    }
    .text2 {
      position: absolute;
      top: 55%;
      left: 52%;
    }
    .text3 {
      position: absolute;
      top: 56%;
      left: 70%;
    }
    .text4 {
      position: absolute;
      top: 63%;
      left: 40%;
    }
    .text7 {
      position: absolute;
      top: 15%;
      left: 46%;
    }
    .text6 {
      position: absolute;
      top: 22%;
      left: 48%;
    }
    .text5 {
      position: absolute;
      top: 30%;
      left: 45%;
    }
  }
  .rightListContain {
    flex-grow: 1;
    height: 100%;
    .rightList {
      width: 200px;
      height: 100%;
      padding-left: 20px;
    }
  }
}
.textMapList {
  cursor: pointer;
  font-size: 20px;
  font-weight: 600;
  color: black;
  margin-bottom: 30px;
}

@media (min-width: 0px) and (max-width: 960px) {
  .manyInput {
    width: 375px !important;
    display: block !important;
    .inputInner {
      margin: auto !important;
      // margin-top: 10px !important;
    }
  }
  .closeAndSrue {
    width: 110px;
  }
}
</style>
